<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div >
    <fieldset>
        <legend>
            注册
        </legend>
        <table>
            <tr>
                <td>
                    名字
                </td>
                <td>
                    <input id="regist-id">
                </td>
            </tr>
            <tr>
                <td>
                    密码
                </td>
                <td>
                    <input id="regist-password">
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <button type="button" id="regist-btn" style="width: 100%;background: #00B7FF">注册</button>
                </td>
            </tr>
        </table>
    </fieldset>
    <fieldset>
        <legend>
            登录
        </legend>
        <table>
            <tr>
                <td>
                    名字
                    <input id="login-id">
                </td>
            </tr>
            <tr>
                <td>
                    密码
                    <input id="login-password">
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <button type="button" id="login-btn" style="width: 80%;background: #00B7FF">登录</button>
                </td>
            </tr>
            <tr>
                <td>
                    <img src="http://localhost:3000/users/getCaptcha" onclick="javascript:this.setAttribute('src','http://localhost:3000/users/getCaptcha?v='+ new Date().getTime() + '&token='+ window.localStorage.token)">
                    <input id="captchar">
                    <button type="button" onclick="captchaValid()">验证码校验</button>
                </td>

            </tr>
        </table>
    </fieldset>
</div>
<div>
    <button onclick="getUserInfo(this)">获取用户信息 </button>
    <div>

    </div>
</div>
</body>
<script src="jquery-2.2.3.min.js"></script>
<script>
    $(function(){
        //入口函数，通常使用window.onload是一样的功效，区别：
        //在jquery文件加载之后，同时当前的windo虾米那已经有了$和jquery对象之后，才去执行
        $('#regist-btn').on('click',function () {
            regist()
        })
        $('#login-btn').on('click',function () {
            login()
        })
    })
    function captchaValid() {
        future.ajax({
            url:'/users/captchaValid',
            type:'get',
            data:{
                captcha:$("#captcha").val()
            },
            success:function (result) {
                // window.localstorage.setItem('token',result)
                alert('验证成功')
            }
        })
    }
    function getUserInfo(obj) {
        future.ajax({
            url:'/users/getUserInfo',
            type:'get',
            success:function (result) {
                $(obj).siblings('div').text(JSON.stringify(result));
            }
        })
    }
    function regist() {
        future.ajax({
            url: '/users/regist',
            type: 'post',
            data: {
                name:$('#regist-name').val(),
                pwd:$('#regist-pwd').val()
            },
            success:function (result) {
                alert(result)
            }
        })
    }
    function login() {
        future.ajax({
            url: '/users/login',
            type: 'get',
            data: {
                name: $('#login-name').val(),
                pwd: $('#login-pwd').val()
            },
            success: function(result) {
                window.localStorage.setItem('token',result)
                alert('登录成功，令牌已拿到')
            }
        })
    }

    var future = {}

    future.baseurl = 'http://localhost:3000'
    future.ajax = function (option) {
        $.ajax({
            beforeSend:function(request){
                if(window.localStorage.token){
                    request.setRequestHeader('token','zuqiang',window.localStorage.token)
                }
            },
            url:future.baseurl + option.url,
            type:option.type || 'post',
            //dataType:'JSON'
            async:option.async || false,
            data:option.data,
            success:function (result) {
                if (option.success) {
                    option.success(result)
                }
            },
            error:function (error) {
                if (option.error) {
                    option.error(error)
                } else {
                    alert(error.responseText)
                }
            }
        })
    }


    /**
     * 设置cookie
     */
    function setCookie(name, value, seconds) {
        seconds = seconds || 0;   //conds有值就直接赋值，没有为0，这个根php不一样。
        var expires = "";
        // cookies随浏览器关闭而失效的方法:
        //     如果不设置Expires的属性那么Cookie的存活时间就是在关闭浏览器的时候。
        if (seconds != 0 ) {      //设置cookie生存时间
            var date = new Date();
            date.setTime(date.getTime()+(seconds*1000));
            expires = "; expires="+date.toGMTString();
        }
        document.cookie = name+"="+escape(value)+expires+"; path=/";   //转码并赋值
    }

    /**
     * 读取cookie
     */
    function getCookie(name) {
        var nameEQ = name + '='
        var ca = document.cookie.split(';') // 把cookie分割成组
        for (var i = 0; i < ca.length; i++) {
            var c = ca[i] // 取得字符串
            while (c.charAt(0) == ' ') { // 判断一下字符串有没有前导空格
                c = c.substring(1, c.length) // 有的话，从第二位开始取
            }
            if (c.indexOf(nameEQ) == 0) { // 如果含有我们要的name
                return unescape(c.substring(nameEQ.length, c.length)) // 解码并截取我们要值
            }
        }
        return false
    }

    /**
     * 检查cookie
     * @param c_name
     * @return {boolean}
     */
    function checkCookie(c_name) {
        username = getCookie(c_name);
        console.log(username);
        if (username != null && username != "") {
            return true;
        }
        else {
            return false;
        }
    }

    /**
     * 清除cookie
     * @param name
     */
    function clearCookie(name) {
        setCookie(name, "", -1);
    }
</script>
</html>
<!--
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
&lt;!&ndash;<button onclick = 'test(this)'>测试一下</button>&ndash;&gt;
&lt;!&ndash;<button id="btn">测试一下</button>&ndash;&gt;
<div style="display: flex;justify-content: space-around">
    <fieldset>
        <legend>注册</legend>
        <table>
            <tr>
                <td>
                    名字
                </td>
                <td>
                    <input id="regist-name">
                </td>
            </tr>
            <tr>
                <td>
                    密码
                </td>
                <td>
                    <input id="regist-pwd">
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <button type="button" id="regist-btn" style="width: 100%;">注册</button>
                </td>
            </tr>
        </table>
    </fieldset>
    <fieldset>
        <legend>登录</legend>
        <table>
            <tr>
                <td>
                    名字
                </td>
                <td>
                    <input id="login-name">
                </td>
            </tr>
            <tr>
                <td>
                    密码
                </td>
                <td>
                    <input id="login-pwd">
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <button type="button" id="login-btn" style="width: 100%;">登录</button>
                </td>
            </tr>
        </table>
    </fieldset>
</div>
<div>
    <button onclick="getUserInfo(this)">获取用户信息</button>
    <div>

    </div>
</div>
<fieldset>
    <legend>验证码</legend>
    <img src="https://www.baidu.com/img/donghx_47e731db3bb713f0802d572062d60cdf.gif" onclick="javascript:this.setAttribute('src','http://localhost:3000/users/getCaptcha?v='+ new Date().getTime() + '&token='+ window.localStorage.token)">
    <input id="captchar">
    <button type="button" onclick="captchaValid()">验证码校验</button>
</fieldset>
</body>
<script src="jquery-2.2.3.min.js"></script>
<script>
    // document.getElementById('btn').addEventListener('click',function(){
    //     console.log(this)
    //     setTimeout(function(){
    //         console.log(this)
    //     },2000)
    //
    //     setTimeout(()=>{
    //         console.log('箭头函数')
    //         console.log(this)
    //     },3000)
    // })
    //
    // var test = function(obj) {
    //     console.log(obj)
    // }
    // window.onload
    $(function(){
        // 入口函数，通常使用跟window.onload是一样的功效，区别：
        // 在jquery文件加载之后，同时当前的window下面已经有了$和jquery对象之后，才去执行
        $('#regist-btn').on('click', function(){
            regist()
        })

        $('#login-btn').on('click', function(){
            login()
        })
    })


    function captchaValid() {
        future.ajax({
            url: '/users/captchaValid',
            type: 'get',
            data:{
                captcha: $("#captchar").val()
            },
            success: function(result){
                alert('验证成功')
            }
        })
    }
    // fatal
    function getUserInfo(obj) {
        future.ajax({
            url: '/users/getUserInfo',
            type: 'get',
            success: function(result){
                // jQuery:
                // partents
                // children
                // siblings
                // find
                $(obj).siblings('div').text(JSON.stringify(result));
            }
        })
    }

    /**
     * 注册函数
     */
    function regist() {
        future.ajax({
            url: '/users/regist',
            type: 'post',
            data: {
                name: $('#regist-name').val(),
                pwd: $('#regist-pwd').val()
            },
            success: function(result) {
                alert(result)
            }
        })
    }

    /**
     * 登录函数
     */
    function login() {
        future.ajax({
            url: '/users/login',
            type: 'get',
            data: {
                name: $('#login-name').val(),
                pwd: $('#login-pwd').val()
            },
            success: function(result) {
                window.localStorage.setItem('token',result)
                alert('登录成功，令牌已拿到')
            }
        })
    }

    // 封装的概念
    // 工具类容器
    var future = {}

    /**
     * 基础地址
     * @type {string}
     */
    future.baseurl = 'http://localhost:3000'

    /**
     * 自定义ajax函数
     * @param options[JSON]
     */
    future.ajax = function(options) {
        $.ajax({
            beforeSend: function(request) {
                if (window.localStorage.token) {
                    request.setRequestHeader('token',window.localStorage.token)
                }
            },
            url: future.baseurl + options.url,
            type: options.type || 'post',
            // dataType: 'JSON'
            async: options.async || false,
            data: options.data,
            success: function (result) {
                if (options.success) {
                    options.success(result)
                }
            },
            error: function (error) {
                if (options.error) {
                    options.error(error)
                } else {
                    alert(error.responseText)
                }
            }
        })
    }

    // var a = 1;
    // var b = 2;
    // var c = 3;
    // var d = 0;
    // d = a ? b = c + 1 : c = a + 2;
    // d = ( a ? b = c + 1 : c = a + 2 );
    // d = ( a ? ( b = c + 1 ) : ( c = a + 2 ) );
    // d = (b = c + 1)
    // console.log(a)
    // console.log(b)
    // console.log(c)
    // console.log(d)

    // var a = true ? 1 : 2;
    // true：

    // false: o false '' null undefined 。。。

    /**
     * 设置cookie
     */
    function setCookie(name, value, seconds) {
        seconds = seconds || 0;   //seconds有值就直接赋值，没有为0，这个根php不一样。
        var expires = "";
        // cookies随浏览器关闭而失效的方法:
        //     如果不设置Expires的属性那么Cookie的存活时间就是在关闭浏览器的时候。
        if (seconds != 0 ) {      //设置cookie生存时间
            var date = new Date();
            date.setTime(date.getTime()+(seconds*1000));
            expires = "; expires="+date.toGMTString();
        }
        document.cookie = name+"="+escape(value)+expires+"; path=/";   //转码并赋值
    }

    /**
     * 读取cookie
     */
    function getCookie(name) {
        var nameEQ = name + '='
        var ca = document.cookie.split(';') // 把cookie分割成组
        for (var i = 0; i < ca.length; i++) {
            var c = ca[i] // 取得字符串
            while (c.charAt(0) == ' ') { // 判断一下字符串有没有前导空格
                c = c.substring(1, c.length) // 有的话，从第二位开始取
            }
            if (c.indexOf(nameEQ) == 0) { // 如果含有我们要的name
                return unescape(c.substring(nameEQ.length, c.length)) // 解码并截取我们要值
            }
        }
        return false
    }

    /**
     * 检查cookie
     * @param c_name
     * @return {boolean}
     */
    function checkCookie(c_name) {
        username = getCookie(c_name);
        console.log(username);
        if (username != null && username != "") {
            return true;
        }
        else {
            return false;
        }
    }

    /**
     * 清除cookie
     * @param name
     */
    function clearCookie(name) {
        setCookie(name, "", -1);
    }
</script>
</html>>
-->
